<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="test">
    <!-- 
    ● 默认: 传递就是event对象
    ● 传递自定义参数: 
      ○ React: <button  onClick={() => test2('abc')}>
      ○ Vue: <button  @click="test2('abc')">    
    ● 传递自定义参数和event
      ○ React: <button  onClick={(event) => test3('abc', event)}>
      ○ Vue: <button  @click="test3('abc', $event)">
     -->
    <button @click="fn">默认传递event</button>
    <button @click="fn2('abc')">传递自定义参数</button>
    <button @click="fn3('abc', $event)">传递自定义参数+event</button>
    <!-- vue在解析模板会自动在外层包裹一个函数 ($event) => {}  -->
  </div>

  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el: '#test',
      data: {},
      methods: {
        fn (e) {
          console.log(e)
          alert(e.target.innerHTML)
        },
        fn2 (msg) {
          alert(msg)
        },
        fn3 (msg, e) {
          alert(msg + '--' + e.target.innerHTML)
        }
      }
    })
  </script>
</body>
</html>